<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态绑定</title>
</head>
<body>
<div id="change" class="change">
    <img data-bind:[attribute_name]="attribute_value"  alt=""/>
</div>

<script !src="">
    let attribute_name = "src"
    let attribute_value = "https://consumer.huawei.com/content/dam/huawei-cbg-site/common/mkt/pdp/phones/mate-x3/img/kv/kv@2x.webp"

    let element = document.querySelector("#change img");
    // console.log(element);

    let attributeNames = element.getAttributeNames();

    for (let i = 0; i < attributeNames.length; i++) {
        let attribute = attributeNames[i]

        if ((attribute.indexOf("data-bind:") !== -1) || (attribute.indexOf(":") === 0)  ) {
            // console.log(attribute);
            let name = attribute.substring(attribute.indexOf(":") + 1);
            console.log(name);
            let eval_attribute_name = eval(name)[0];
            console.log(eval_attribute_name);

            let value = element.getAttribute(attribute);
            console.log(value);
            console.log(eval(value));

            element.setAttribute(eval_attribute_name, eval(value))


        }
    }

</script>
</body>
</html>